import React from 'react';

function FancyBorder(props) {
    return (
        <div style={{ border: `1px ${props.color} solid` }} className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    );
}

function WelcomeDialog() {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                Welcome
        </h1>
            <p className="Dialog-message">
                Thank you for visiting our spacecraft!
        </p>
        </FancyBorder>
    );
}


function SplitPane(props) {
    return (
        <div className="SplitPane" style={{ display: "flex" }}>
            <div className="SplitPane-left">
                {props.left}
            </div>
            <div className="SplitPane-right" style={{ flex: 1 }}>
                {props.right}
            </div>
        </div>
    );
}

function Dialog(props) {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                {props.title}
            </h1>
            <p className="Dialog-message">
                {props.message}
            </p>
        </FancyBorder>
    );
}
function WelcomeDialog2() {
    return (
        <Dialog
            title="Welcome"
            message="Thank you for visiting our spacecraft!" />

    );
}

class Five extends React.Component {


    constructor(props) {
        super(props);
    }



    render() {
        return (
            <div>
                <FancyBorder color="red">
                    <div>inner</div>
                </FancyBorder>

                <WelcomeDialog>

                </WelcomeDialog>


                <WelcomeDialog2></WelcomeDialog2>

                <SplitPane
                    left={
                        <ul>
                            <li>菜单一</li>
                            <li>菜单一</li>
                            <li>菜单一</li>
                            <li>菜单一</li>
                        </ul>
                    }
                    right={
                        <WelcomeDialog>

                        </WelcomeDialog>
                    } />

            </div>

        );
    }


}

export default Five;